<template>
  <div>
    <h1>App</h1>
    <p>arr:{{ arr }}</p>
    <button @click="addAll">给数组的每一个值+1</button>

    <p>{{ cat }}</p>
    <button @click="changeCat">张三换李四</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { reactive, ref } from 'vue';

let arr = reactive<number[]>([1, 2, 3, 4]);

const addAll = () => {
  // 一旦reactive创建的数据是被替换的，则不再拥有响应式
  arr = arr.map((item) => item + 1);
};

// ref创建的数据被替换的时候，替换的是ref对象的value属性，具有响应式
const cat = ref({ name: 'maomi', age: 3 });
console.log(cat);
const changeCat = () => {
  cat.value = { name: '李四', age: 3 };
};

/* 
   class RefImpl{
    // 当ref对象被实例化的时候，就会把拿到的数据放在实例化对象的value属性上
    // 当拿到的数据是基本类型值的时候，就直接放在了value属性上
    // 当拿到的数据是对象类型值的时候，就会先创建当前对象的代理对象，然后再放在value属性上
    constructor(n){
      this.value = n
    }
    // RefImpl类有两个方法，分别是 getter 和 setter
    // 当value属性的值被获取的时候，就会调用getter方法收集依赖
    // 当value属性的值被设置的时候,就会调用setter通知依赖更新
    getter(){}
    setter(){}
   }
*/
</script>
<style></style>
